<template>
  <div>
    <van-nav-bar title="财务管理" left-text="返回" left-arrow v-back />
    <div class="finance-container">
      <finance-date-choose @dateChange="dateChange"></finance-date-choose>
      <div class="finance-content">
        <div class="finance-content__tit">
          <van-icon name="points"></van-icon>
          交易概况
        </div>
        <div class="finance-content__grid">
          <div class="finance-content__grid__item">
            <div class="finance-content__grid__item__val">
              <span class="unit">￥</span>{{info.orderSum}}
            </div>
            <div class="finance-content__grid__item__tit">订水总额</div>
          </div>
          <div class="finance-content__grid__item">
            <div class="finance-content__grid__item__val">
              <span class="unit">￥</span>{{info.debtSum}}
            </div>
            <div class="finance-content__grid__item__tit">欠款总额</div>
          </div>
          <div class="finance-content__grid__item">
            <div class="finance-content__grid__item__val">
              <span class="unit">￥</span>{{info.repaymentSum}}
            </div>
            <div class="finance-content__grid__item__tit">还款总额</div>
          </div>
          <div class="finance-content__grid__item">
            <div class="finance-content__grid__item__val">
              {{info.orderNum}}
            </div>
            <div class="finance-content__grid__item__tit">订单总量</div>
          </div>
          <div class="finance-content__grid__item">
            <div class="finance-content__grid__item__val">
              {{info.orderWaterNum}}
            </div>
            <div class="finance-content__grid__item__tit">水厂销量</div>
          </div>
          <div class="finance-content__grid__item">
            <div class="finance-content__grid__item__val">
              {{info.productNumA}}
            </div>
            <div class="finance-content__grid__item__tit">自营销量</div>
          </div>
          <div class="finance-content__grid__item">
            <div class="finance-content__grid__item__val">
              {{info.productNumB}}
            </div>
            <div class="finance-content__grid__item__tit">其他销量</div>
          </div>
        </div>
      </div>
      <div class="finance-content">
        <div class="finance-content__tit">
          <van-icon name="chart-trending-o"></van-icon>
          报表统计
        </div>
        <div>
          <van-cell-group>
            <van-cell title="财务报表" to="/financeReport" is-link>
            </van-cell>
            <van-cell title="商品销量统计" to="/productSellCountChart" is-link>
            </van-cell>
            <van-cell title="商品分类统计" to="/productTypeCountChart" is-link>
            </van-cell>
            <van-cell title="客户统计" to="/customerCountChart" is-link>
            </van-cell>
            <van-cell title="配送员统计" to="/senderCountChart" is-link>
            </van-cell>
          </van-cell-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import FinanceDateChoose from '@/components/FinanceDateChoose';
  import {TRANSACTION_INFO} from '@/api/finance';
  import {mapState} from 'vuex';
  export default {
    components: {
      FinanceDateChoose,
    },
    computed: {
      ...mapState(['stationInfo'])
    },
    data() {
      return {
        searchDate: new Date().Format('yyyy'),
        searchDateType: 'year',
        info: {}
      }
    },
    mounted(){
      this.getInfo();
    },
    methods: {
        getInfo(){
          this.$reqGet(TRANSACTION_INFO, {
            stationId: this.stationInfo.id,
            dateType: this.searchDateType,
            date: this.searchDate
          }).then(res => {
            this.info = res.data;
          })
        },
        dateChange(info){
          this.searchDate = info.date;
          this.searchDateType = info.type;
          this.getInfo();
        }
    }
  }

</script>
